<!-- 登录 -->
<template>
  <div class="Login" :style="{width:screenWidth,height:screenHeight-20+'px',position: 'relative'}">
    <n-carousel autoplay dot-placement="none"
                :style="{width:screenWidth,height:screenHeight-20+'px',position: 'relative'}">
      <img class="carousel-img" src="https://img1.baidu.com/it/u=2594087829,364749085&fm=26&fmt=auto&gp=0.jpg"/>
      <img class="carousel-img" src="https://img1.baidu.com/it/u=1964710867,2676604591&fm=26&fmt=auto&gp=0.jpg"/>
      <img class="carousel-img" src="https://img0.baidu.com/it/u=1355864261,3051068006&fm=26&fmt=auto&gp=0.jpg"/>
    </n-carousel>
    <div class="content" :style="{position: 'absolute',top:110+'px'}">
      <div class="content-theme">登录</div>
      <div class="form-login">
        <n-message-provider>
          <LoginForm @user='logins'/>
        </n-message-provider>
      </div>
      <router-link to="/">注册&gt;&gt;&gt;</router-link>
      <router-view/>
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import LoginForm from '../components/LoginForm'
import request from '../plugins/axios'
import qs from 'qs'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    LoginForm
  },
  setup () {
    const screenHeight = document.documentElement.clientHeight
    const screenWidth = document.documentElement.clientWidth
    const router = useRouter()
    const logins = (e) => {
      console.log(e)
      request.post('/oauth/token', qs.stringify({
        grant_type: 'password',
        username: e.number,
        scope: 'all',
        password: e.password
      }))
        .then(res => {
          console.log(res)
          if (res.status === 200) {
            router.push('/indexUser')
          }
        })
        .catch(error => {
          console.log('error连接失败=========>' + error)
        })
    }
    return {
      screenHeight,
      screenWidth,
      logins
    }
  }
})
</script>
<style>
  .Login {
    /*background:url("../assets/background_quan.jpg") no-repeat;*/
    /*background-size: cover;*/
    /*background-position: center;*/
  }

  .Login .carousel-img {
    width: 100%;
    height: 800px;
  }

  .Login .content {
    width: 350px;
    height: 420px;
    background-color: rgba(255, 255, 255, 0.5);
    /*margin: auto;*/
    margin-left: 580px;
    border-radius: 20px;
    border: 1px solid #797979;
    /*position: absolute;*/
    /*top: 100px;*/
    /*left: 600px;*/
  }

  .content .content-theme {
    height: 80px;
    font-size: 26px;
    font-weight: 600;
    margin: 0 auto;
    line-height: 80px;
    color: #333333;
  }

  .content .form-login {
    /*background-color: #83ff82;*/
    width: 250px;
    margin: 0 auto;
    white-space: revert;
  }

  .content a {
    color: #2c3e50;
    text-decoration: none;
  }
</style>
